Vue.js computed at watch
计算属性 (computed)
getter
Vue 提供了 computed 和 watch 属性，分别实现了计算属性和侦听器，其中计算属性为模板提供了一种家但便捷的表达式虽然设计他们的初衷是用于实现简单的运算。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <div id="app">
<p>{{projectMessage}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
project : {
name: [
'Linux system',
'Git'
]
}
}
},
computed: {
projectMessage() {
return this.project.name.length > 0 ? 'Welcome you to join' : 'Sorry you can’t enter the community, please participate or create a project'
}
}
})
const vm = app.mount('#app')
</script>
|
如上述的例子中，主要声明了一个 computed 属性 projectMessage，假设 project >0 即可加入社区，而 < 0 的 User 将会被拒绝。
projectMessage 所依赖的是 data() 中 project 数组的值，当 vm.project.name 发生更改时 projectMessage 也会对应的进行改变。
setter
setter 主要的作用就是当改变 projectMessge 时来重新进行调整，也就是你可以在该函数下写一些你想重新改变的东西，比如添加或者关联等：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <div id="app">
<p>{{projectMessage}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
project : 'Vue',
author: 'Evan You'
}
},
computed: {
projectMessage: {
get() {
return this.project + ' ' + this.author
},
set(newValue) {
alert("当前名称是：" + newValue);
const names = newValue.split(' ')
this.project = names[0]
this.author = names + 'Vue!'
}
}
}
})
const vm = app.mount('#app')
</script>
|
侦听器 (watch)
侦听器主要通过 watch选项来提供一个通用的方法来进行响应数据的变化，当数据变化或开销较大的时候这种方法最为有用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <div id="app">
<input type="text" v-model="id">
<p>{{message}}</p>
</div>
<script>
const app = Vue.createApp ({
data() {
return {
id: '0',
message: 'Your id'
}
},
watch: {
id(newId) {
if (newId >= 0) {
this.getId()
}
}
},
methods: {
getId() {
this.message = 'Thinking...'
if (this.id <= 712)
this.message = 'true'
else
this.message = 'false'
}
}
})
const vm = app.mount('#app')
</script>
|
